<template>
    <div class="app-container">
      <!-- 筛选 -->
      <el-row>
        <div class="select-box">
            <div class="search-title">
              <i class="el-icon-search"></i>
              <span>  筛选搜查</span>
              <div class="search-button">
                <el-button  @click="resetQuery" >重置</el-button>
                <el-button  type="primary"  @click="handleQuery">查询搜索</el-button>
              </div>
            </div>
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px" class="search-form">
              <el-form-item label="编号：" prop="userId">
                <el-input
                  v-model="queryParams.userId"
                  placeholder="请输入用户编号"
                  clearable
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="手机号码：" prop="phoneNumber">
                <el-input
                  v-model="queryParams.phoneNumber"
                  placeholder="请输入手机号码"
                  clearable
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="状态：" prop="status">
                <el-select
                  v-model="queryParams.status"
                  placeholder="用户状态"
                  clearable
                  style="width: 240px"
                >
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="注册时间：">
                <el-date-picker
                  v-model="dateRange"
                  style="width: 240px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
      </el-row>
      <!-- 标题 -->
      <el-row>
        <div class="list-title">
          <div class="title">
            <span class="el-icon-tickets"></span>
            <span class="title-font">用户列表</span>
          </div>
        </div>
      </el-row>
  
      <el-row>
        <!--用户数据-->
        <el-table v-loading="loading" :data="userList"  border >
          <el-table-column label="编号" align="center"  prop="userId" />
          <el-table-column label="账号" align="center"  prop="number"  :show-overflow-tooltip="true" />
          <el-table-column label="真实姓名" align="center"  prop="name"  :show-overflow-tooltip="true" />
          <el-table-column label="手机号" align="center"  prop="phoneNumber" width="120" />
          <el-table-column label="详细地址" align="center"  prop="adress"  width="160" :show-overflow-tooltip="true" />
          <el-table-column label="状态" align="center" prop="status" >
            <template slot-scope="scope">
              <span>{{ scope.row.status == "0" ? "未认证" : "已认证"  }}</span>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" align="center" prop="registerTime"  width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.registerTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实名时间" align="center" prop="verifiedTime"  width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.verifiedTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="pagination.current"
          :page-size="pagination.pageSize"
          layout="total, prev, pager, next"
          :total="pagination.total"
          @pagination="getList"
          @current-change="onPageChange"
          class="paper"
        >
        </el-pagination>
      </el-row>
    </div>
  </template>
  
  <script>
  import {getUsersList} from '@/api/user'
  
  export default {
    name: "User",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 用户表格数据
        userList: null,
        // 日期范围
        dateRange:[],
        // 查询参数
        queryParams: {
          userId:undefined,
          phoneNumber:undefined,
          status:undefined,
        },
        // 分页参数
        pagination:{
          total:0,
          current:1,
          pageSize:10,
        },
        // 搜索下拉框参数
        options:[
          {
            value:"0",
            label:"未认证"
          },
          {
            value:"1",
            label:"已认证"
          }
        ]
      };
    },
    created() {
      this.getList()
    },
    methods: {
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        getUsersList({
          pageIndex: this.pagination.current,
          pageSize: this.pagination.pageSize,
          queryParams:this.queryParams,
          dateRange:this.dateRange
        }).then(response => {
          // console.log("数据",response);
          let data = response.data.data;
          this.userList = data.userList;
          this.pagination.total = data.total;
          this.pagination.current = data.pageIndex;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.pagination.current = 1;
        console.log("时间",this.dateRange);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm")
        this.handleQuery();
      },
      // 页号发生变化
      onPageChange(number){
        this.pagination.current=number;
        this.getList();
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .select-box{
    border: 1px solid rgb(0, 0, 0,0.1);
    border-radius: 5px;
    padding: 20px;
  }
  .search-form{
    margin-top: 20px;
    padding: 0 20px;
  }
  .search-title{
    overflow: hidden;
  }
  .search-button{
    float: right;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .list-title {
    height: 50px;
    width: 100%;
    border: solid 1px #DCDFE6;
    border-radius: 5px;
  
    .title {
      margin: 14px;
      float: left;
    }
  
    .title-font {
      margin-left: 5px;
    }
  }
  .paper{
    float: right;
    margin-top: 10px;
  }
  </style>